<template>
  <div class="order-list">
    <el-card class="page-header">
      <template #header>
        <div class="header-title">
          <h2>订单管理</h2>
          <el-button type="primary" icon="Plus">导出订单</el-button>
        </div>
      </template>
      
      <!-- 搜索过滤 -->
      <div class="filter-container">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="订单编号">
            <el-input v-model="searchForm.orderNo" placeholder="订单编号" clearable />
          </el-form-item>
          <el-form-item label="订单状态">
            <el-select v-model="searchForm.status" placeholder="选择状态" clearable>
              <el-option label="待付款" value="pending" />
              <el-option label="已付款" value="paid" />
              <el-option label="已发货" value="shipped" />
              <el-option label="已完成" value="completed" />
              <el-option label="已取消" value="cancelled" />
            </el-select>
          </el-form-item>
          <el-form-item label="下单时间">
            <el-date-picker
              v-model="searchForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <!-- 订单表格 -->
    <el-card class="order-table-card">
      <el-table
        v-loading="loading"
        :data="orderList"
        border
        style="width: 100%"
      >
        <el-table-column prop="orderNo" label="订单编号" min-width="120" />
        <el-table-column prop="username" label="用户名" min-width="100" />
        <el-table-column prop="totalAmount" label="订单金额" min-width="100">
          <template #default="scope">
            ¥{{ scope.row.totalAmount }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="订单状态" min-width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="payMethod" label="支付方式" min-width="100" />
        <el-table-column prop="createTime" label="创建时间" min-width="160" />
        <el-table-column label="操作" fixed="right" width="200">
          <template #default="scope">
            <el-button 
              size="small" 
              @click="handleDetail(scope.row.id)"
            >
              详情
            </el-button>
            <el-button 
              v-if="scope.row.status === 'pending'" 
              size="small" 
              type="primary"
              @click="handleUpdateStatus(scope.row.id, 'paid')"
            >
              确认付款
            </el-button>
            <el-button 
              v-if="scope.row.status === 'paid'" 
              size="small" 
              type="success"
              @click="handleUpdateStatus(scope.row.id, 'shipped')"
            >
              发货
            </el-button>
            <el-button 
              v-if="scope.row.status === 'pending'" 
              size="small" 
              type="danger"
              @click="handleUpdateStatus(scope.row.id, 'cancelled')"
            >
              取消
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="page"
          v-model:page-size="limit"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
// 导入订单API
// 注意：这里模拟不使用API调用，实际开发中应该导入
// import { getOrderList, updateOrderStatus } from '@/api/order'

const router = useRouter()

// 搜索表单
const searchForm = reactive({
  orderNo: '',
  status: '',
  dateRange: []
})

// 列表数据
const loading = ref(false)
const orderList = ref([])
const page = ref(1)
const limit = ref(10)
const total = ref(0)

// 模拟数据
const mockOrders = [
  {
    id: '1001',
    orderNo: 'ORD20230501001',
    username: '张三',
    totalAmount: 299.00,
    status: 'pending',
    payMethod: '微信支付',
    createTime: '2023-05-01 14:30:22'
  },
  {
    id: '1002',
    orderNo: 'ORD20230502002',
    username: '李四',
    totalAmount: 188.50,
    status: 'paid',
    payMethod: '支付宝',
    createTime: '2023-05-02 09:15:45'
  },
  {
    id: '1003',
    orderNo: 'ORD20230503003',
    username: '王五',
    totalAmount: 520.00,
    status: 'shipped',
    payMethod: '微信支付',
    createTime: '2023-05-03 16:40:10'
  },
  {
    id: '1004',
    orderNo: 'ORD20230504004',
    username: '赵六',
    totalAmount: 99.90,
    status: 'completed',
    payMethod: '支付宝',
    createTime: '2023-05-04 11:28:36'
  },
  {
    id: '1005',
    orderNo: 'ORD20230505005',
    username: '钱七',
    totalAmount: 359.00,
    status: 'cancelled',
    payMethod: '银联支付',
    createTime: '2023-05-05 10:20:15'
  }
]

// 获取订单列表
const getOrders = () => {
  loading.value = true
  // 模拟API调用
  setTimeout(() => {
    orderList.value = mockOrders
    total.value = mockOrders.length
    loading.value = false
  }, 500)
  
  // 实际API调用
  // const params = {
  //   page: page.value,
  //   limit: limit.value,
  //   orderNo: searchForm.orderNo,
  //   status: searchForm.status,
  //   startDate: searchForm.dateRange[0] ? searchForm.dateRange[0] : undefined,
  //   endDate: searchForm.dateRange[1] ? searchForm.dateRange[1] : undefined
  // }
  // getOrderList(params).then(res => {
  //   orderList.value = res.data.list
  //   total.value = res.data.total
  //   loading.value = false
  // }).catch(() => {
  //   loading.value = false
  // })
}

// 查看订单详情
const handleDetail = (id) => {
  router.push(`/admin/order/${id}`)
}

// 更新订单状态
const handleUpdateStatus = (id, status) => {
  const statusMap = {
    paid: '已付款',
    shipped: '已发货',
    completed: '已完成',
    cancelled: '已取消'
  }
  
  ElMessageBox.confirm(
    `确定要将订单状态更新为"${statusMap[status]}"吗？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 模拟API调用
    const index = orderList.value.findIndex(item => item.id === id)
    if (index !== -1) {
      orderList.value[index].status = status
      ElMessage.success('订单状态更新成功')
    }
    
    // 实际API调用
    // updateOrderStatus(id, status).then(() => {
    //   ElMessage.success('订单状态更新成功')
    //   getOrders()
    // })
  }).catch(() => {
    // 取消操作
  })
}

// 状态标签类型
const getStatusType = (status) => {
  const map = {
    pending: 'warning',
    paid: 'info',
    shipped: 'primary',
    completed: 'success',
    cancelled: 'danger'
  }
  return map[status] || 'info'
}

// 状态文本
const getStatusText = (status) => {
  const map = {
    pending: '待付款',
    paid: '已付款',
    shipped: '已发货',
    completed: '已完成',
    cancelled: '已取消'
  }
  return map[status] || '未知状态'
}

// 搜索
const handleSearch = () => {
  page.value = 1
  getOrders()
}

// 重置搜索
const resetSearch = () => {
  Object.keys(searchForm).forEach(key => {
    searchForm[key] = ''
  })
  searchForm.dateRange = []
  page.value = 1
  getOrders()
}

// 改变每页数量
const handleSizeChange = (val) => {
  limit.value = val
  getOrders()
}

// 改变页码
const handleCurrentChange = (val) => {
  page.value = val
  getOrders()
}

onMounted(() => {
  getOrders()
})
</script>

<style scoped>
.order-list {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.header-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title h2 {
  margin: 0;
  font-size: 20px;
}

.filter-container {
  margin-top: 10px;
}

.order-table-card {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}
</style> 